<template>
  <div class="layout-header-right-content w-float-right">
    <a-dropdown>
      <a-avatar :size="40" :src="userIcon" class="user-icon w-pointer" />
      <a-menu slot="overlay" @click="menuClick">
        <a-menu-item key="home">
          主页
        </a-menu-item>
        <a-menu-item key="logout">
          退出登录
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { Getter } from 'vuex-class'

@Component({
  name: 'ComAdminMainHeader'
})
export default class ComAdminMainHeader extends Vue {
  @Getter('auth/MENU_LIST') enumList!:any
  @Getter('auth/USER_ICON') userIcon!:string

  /**
   * 头像点击
   */
  menuClick ({ key }: any) {
    switch (key) {
      case 'home':
        this.$router.push('/')
        break
      case 'logout':
        this.$confirm({
          title: '确定要退出登录吗？',
          onOk: () => {
            this.$store.dispatch('auth/LOGOUT').then(() => {
              this.$message.success('退出成功')
              this.$router.push('/')
            })
          }
        })
        break
    }
  }
}
</script>

<style scoped lang="less">
.layout-header-right-content {
  padding-right: 16px;
}
</style>
